<template>
  <ModalFormTemplate ref="modalRef" title="demo" :formConfig="formConfig" />
</template>
<script setup lang="ts">
  import { computed } from 'vue';
  import ModalFormTemplate from '@/components/template/form/modal-form-template.vue';

  /**
   * 不同的 props api 之间可以混用
   * @example
   * props: {
   *    options:'abcd.options.get',
   *    changeGetFormValue:'abcd.formValue.get',
   *    changeGetFormConfig:'abcd.formConfig.get',
   * }
   */
  const formConfig = computed(() => [
    /* 如何使用（单选、多选、选择器、树选择器、级联选择器）远程获取options */
    {
      title: '远程获取options中的可选参数',
      dataIndex: 'get_options_by_action',
      type: 'select' as const,
      // 注意！这些请求返回的数据格式必须满足 [{ label: '展示名称', value: 实际值（可以是字符串、数字、布尔值） }]
      props: {
        // 直接写一个action，此时options会通过action进行远程查询
        options: 'abcd.options.get',
        // 你可能需要在请求时自定义某些参数，那么你可以这样写
        options: {
          action: 'abcd.options.get',
          params: {
            xxxId: '123',
          },
        },
      },
    },
    /* 如何使用 select 在选择某个选项时，动态的获取表单内其他字段的值 */
    {
      title: 'select选中时远程获取form中的参数',
      dataIndex: 'get_form_value_by_action_and_select_value',
      type: 'select' as const,
      props: {
        // 直接写一个action，此时表单会通过action进行远程查询
        changeGetFormValue: 'abcd.formValue.get',
        // 你可能需要在请求时自定义某些参数，那么你可以这样写
        changeGetFormValue: {
          action: 'abcd.formValue.get',
          params: {
            xxxId: '123',
          },
        },
      },
    },
    /* 如何使用 select 在选择某个选项时，动态的获取表单 */
    {
      title: 'select选中时远程获取form中的参数',
      dataIndex: 'get_form_config_by_action_and_select_value',
      type: 'select' as const,
      props: {
        // 直接写一个action，此时表单会通过action进行远程查询
        changeGetFormConfig: 'abcd.formConfig.get',
        // 你可能需要在请求时自定义某些参数，那么你可以这样写
        changeGetFormConfig: {
          action: 'abcd.formConfig.get',
          params: {
            xxxId: '123',
          },
        },
      },
    },
    /** 动态表单 hidden 传入一个函数时，函数的第一个参数为 formData，每次 formData 改变时都会执行 hidden */
    {
      title: '动态表单hidden',
      dataIndex: 'get_hidden_by_form_data',
      type: 'input' as const,
      hidden(formData: any) {
        return formData.name === '1';
      },
      // 默认参数，若配置 getHiddenParams 参数将在 submit 时传递给后端，否则 hidden 值为 true 时参数将被忽略
      defaultValue: 100,
    },
    /** upload 上传限制文件大小，通过 uploadMaxSize 配置：单位 MB */
    {
      title: 'upload 上传限制文件大小',
      dataIndex: 'upload_max_size',
      type: 'upload' as const,
      uploadMaxSize: 2,
    },
  ]);
</script>
<style lang="less" scoped></style>
